<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			div>#u1 {
				display: flex;
				margin-top: -35px;
				margin-left: 800px;


			}

			button {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-left: 6px;
				border: none;
			}
		</style>
		<script>
			window.onload = function() {
				var imgArr = ["../day9/img/1.png", "../day9/img/2.jpg", "../day9/img/3.jpg", "../day9/img/4.png"];
				var netArr = ["https://www.baidu.com", "https://www.baidu.com", "https://www.baidu.com",
					"https://www.baidu.com"
				];

				var timer;
				var img = document.getElementById("img");
				var a = document.getElementById("a");
				var u1 = document.getElementById("u1");
				var d1 = document.getElementById("d1");
				var index = 0;

				timer = setInterval(function() {

					u1.children[index].firstElementChild.style.backgroundColor = "white";
					index++;
					if (index >= imgArr.length) {
						index = 0;

					};
					u1.children[index].firstElementChild.style.backgroundColor = "orange";
					img.src = imgArr[index];
					a.href = netArr[index];
				}, 1000);
				img.onmouseover = function() {
					clearInterval(timer);

				}
				d1.onmouseover = function() {
					clearInterval(timer);
				}
				d1.onmouseout = function() {
					timer = setInterval(function() {

						u1.children[index].firstElementChild.style.backgroundColor = "white";
						index++;
						if (index >= imgArr.length) {
							index = 0;

						};
						u1.children[index].firstElementChild.style.backgroundColor = "orange";
						img.src = imgArr[index];
						a.href = netArr[index];
					}, 1000);
				}


				// function shiftImg(index) {
				// 	clearInterval(timer);
				// 	// u1.children[index].firstElementChild.style.backgroundColor = "white";
				// 	// // img.src = imgArr[index];
				// 	// // a.href = netArr[index];
				// 	// u1.children[index].firstElementChild.style.backgroundColor = "orange";
				// }

				function out() {
					timer = setInterval(function() {

						u1.children[index].firstElementChild.style.backgroundColor = "white";
						index++;
						if (index >= imgArr.length) {
							index = 0;

						};
						u1.children[index].firstElementChild.style.backgroundColor = "orange";
						img.src = imgArr[index];
						a.href = netArr[index];
					}, 1000);
				}
				img.onmouseout = function() {
					timer = setInterval(function() {


						if (index >= imgArr.length) {
							index = 0;

						};
						img.src = imgArr[index];
						a.href = netArr[index];
						index++;
					}, 1000);
				}
			}
		</script>
	</head>
	<body>
		<div>
			<a href="" id="a"><img id="img" src="../day9/img/1.png"></a>
			<ul id="u1" type="none">
				<li><button id="d1" style="background-color: orange;"></button></li>
				<li><button id="d1"></button></li>
				<li><button id="d1"></button></li>
				<li><button id="d1"></button></li>
			</ul>
		</div>
	</body>
</html>
